{__NOLAYOUT__}
<form data-method="post" data-action="/{$Request.module}/{$Request.controller}/{$Request.action}" data-submit="ajax" data-validate="true" class="form-horizontal" id="editButtonForm">
    <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title">{$data['id']?'修改':'添加'}动作</h3>
                </div>
                <input type="hidden" name="id" value="{$data.id ?? ''}">
                <input type="hidden" name="pid" value="{$data.pid ?? ''}">

                <div class="modal-body">
                    <div class="modal-body-content">

 						<div class="form-group must">
                            <label class="col-sm-3 control-label">名称</label>
                            <div class="col-sm-7"> 
                                <input type="text" class="form-control" name="title" maxlength="8" placeholder="至多8个字符" required value="{$data.title ?? ''}">
                            </div>
                        </div>

                        <div class="form-group must">
                            <label class="col-sm-3 control-label">唯一标识符</label>
                            <div class="col-sm-7"> 
                                <input type="text" class="form-control" name="name" maxlength="20" placeholder="如：add、edit、search等" required value="{$data.name ?? ''}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">事件类型</label>
                            <div class="col-sm-7"> 
                               <select name="event_type" id="event_type" class="form-control" style="width: 125px;display: inline-block;">
                               		<option value="view"    {$data['event_type']=='view' ? ' selected ' : ''}>视图</option>
                               		<option value="default" {$data['event_type']=='default' ? ' selected ' : ''}>默认</option>
                               		<option value="custom"  {$data['event_type']=='custom' ? ' selected ' : ''}>自定义</option>
                               </select>
                               <input type="text" class="form-control" name="event_value" style="width: 130px;display: inline-block;margin-left: 10px;" maxlength="50" placeholder="系统默认"  value="{$data.event_value ?? ''}">
                            </div>
                        </div>

                        <div class="form-group" id="view_target">
                            <label class="col-sm-3 control-label">视图方式</label>
                            <div class="col-sm-7"> 
                               <select name="target" id="target" class="form-control">
                               		<option value="modal"  {$data['target']=='modal' ? ' selected ' : ''}>模态框</option>
                               		<option value="self"   {$data['target']=='self'  ? ' selected ' : ''}>在本页打开</option>
                               		<option value="_blank" {$data['target']=='_blank'? ' selected ' : ''}>在新窗口打开</option>
                               </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">状态</label>
                            <div class="col-sm-7"> 
                               <select name="group"   class="form-control" style="width: 125px;display: inline-block;">
                               		<option value="1" {$data.group == 1 ? ' selected ' : ''}>在第一组中</option>
                               		<option value="2" {$data.group == 2 ? ' selected ' : ''}>在第二组中</option>
                               		<option value="3" {$data.group == 3 ? ' selected ' : ''}>在第三组中</option>
                               </select>

                               <select name="visible"   class="form-control" style="width: 130px;display: inline-block;margin-left: 10px;">
                                    <option value="1" {$data.visible == 1 ? ' selected ' : ''}>显示</option>
                                    <option value="0" {$data.visible == 0 ? ' selected ' : ''}>隐藏</option>
                               </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">权限</label>
                            <div class="col-sm-7"> 
                               <select name="access"   class="form-control">
                               		<option value="0">系统默认</option>
                               		<option value="-1" {$data['access']== -1 ? ' selected ' : ''}>禁止访问</option>
                               		<option value="1"  {$data['access']==  1 ? ' selected ' : ''}>无限制</option>
                               </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">图标</label>
                            <div class="col-sm-7 input-group" style="width: 270px;margin-left: 143px;"> 
                            	<div class="input-group-addon" id="select_icon">@</div>
                             	<input type="text" id="icon" class="form-control" name="icon" value="{$data.icon ?? ''}">
                            </div>
                        </div>
						
						<div class="form-group">
                            <label class="col-sm-3 control-label">排序</label>
                            <div class="col-sm-7"> 
                             	<input type="text" class="form-control digits" name="sort" placeholder="数字越大越靠前" value="{$data.sort ?? '0'}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">排序</label>
                            <div class="col-sm-7"> 
                             	<input type="text" class="form-control" name="remark" placeholder="备注说明" value="{$data.remark ?? ''}">
                            </div>
                        </div>
                    </div> 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">

$('#event_type').on('change', function(){
	var $this = $(this);
	var $event_value = $this.next();
    console.log($event_value)
	var $view_target = $('#view_target');
	if(this.value == 'default'){
		$this.css('width', '');
		$event_value.val('').css('display', 'none');
	}else{
		$this.css('width', '125px');
		$event_value.css('display', 'initial');
	}
	
	if(this.value == 'view'){
		$view_target.show();
	}else{
		$view_target.hide();
	}
}).trigger('change');

$('#icon_list').on('hide.bs.modal', function(){
	$('#editButtonForm').show();
});

$('#select_icon').on('click', function(){
	$('#editButtonForm').hide();
	$('#icon_list').modal({backdrop: false}).show();
});

$('#icon_list li').on('click', function(){
	var class_name = this.firstElementChild.getAttribute('class').slice(3);
	$('#icon').val(class_name);
	$('#icon_list').modal('hide');
});
</script>


<style type="text/css">
    #icon_list ul li {
        display: inline-block;
        width: 32.3%;
    }
</style>


<div class="modal fade" id="icon_list" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">从图标库中选择</h4>
            </div>
            <div class="modal-body" style="max-height: 450px;overflow-y: scroll;">
                <ul>
                    <li><i class="fa fa-circle"></i> fa-circle</li>
                    <li><i class="fa fa-bookmark"></i> fa-bookmark</li>
                    <li><i class="fa fa-bar-chart"></i> fa-bar-chart</li>
                    <li><i class="fa fa-bars"></i> fa-bars</li>
                    <li><i class="fa fa-battery-full"></i> fa-battery-full</li>
                    <li><i class="fa fa-bell"></i> fa-bell</li>
                    <li><i class="fa fa-bug"></i> fa-bug</li>
                    <li><i class="fa fa-calculator"></i> fa-calculator</li>
                    <li><i class="fa fa-building"></i> fa-building</li>
                    <li><i class="fa fa-calendar"></i> fa-calendar</li>
                    <li><i class="fa fa-camera"></i> fa-camera</li>
                    <li><i class="fa fa-certificate"></i> fa-certificate</li>
                    <li><i class="fa fa-check-square"></i> fa-check-square</li>
                    <li><i class="fa fa-clock-o"></i> fa-clock-o</li>
                    <li><i class="fa fa-clone"></i> fa-clone</li>
                    <li><i class="fa fa-close"></i> fa-close</li>
                    <li><i class="fa fa-cloud"></i> fa-cloud</li>
                    <li><i class="fa fa-cloud-download"></i> fa-cloud-download</li>
                    <li><i class="fa fa-cloud-upload"></i> fa-cloud-upload</li>
                    <li><i class="fa fa-cog"></i> fa-cog</li>
                    <li><i class="fa fa-comment"></i> fa-comment</li>
                    <li><i class="fa fa-comments"></i> fa-comments</li>
                    <li><i class="fa fa-credit-card"></i> fa-credit-card</li>
                    <li><i class="fa fa-desktop"></i> fa-desktop</li>
                    <li><i class="fa fa-download"></i> fa-download</li>
                    <li><i class="fa fa-envelope"></i> fa-envelope</li>
                    <li><i class="fa fa-database"></i> fa-database</li>
                    <li><i class="fa fa-edit"></i> fa-edit</li>
                    <li><i class="fa fa-plus"></i> fa-plus</li>
                    <li><i class="fa fa-trash"></i> fa-trash</li>
                    <li><i class="fa fa-times"></i> fa-times</li>
                    <li><i class="fa fa-search"></i> fa-search</li>
                    <li><i class="fa fa-eye"></i> fa-eye</li>
                    <li><i class="fa fa-exclamation-triangle"></i> fa-exclamation-triangle</li>
                    <li><i class="fa fa-folder"></i> fa-folder</li>
                    <li><i class="fa fa-folder-open"></i> fa-folder-open</li>
                    <li><i class="fa fa-globe"></i> fa-globe</li>
                    <li><i class="fa fa-hand-pointer-o"></i> fa-hand-pointer-o</li>
                    <li><i class="fa fa-heart"></i> fa-heart</li>
                    <li><i class="fa fa-info-circle"></i> fa-info-circle</li>
                    <li><i class="fa fa-picture-o"></i> fa-picture-o</li>
                    <li><i class="fa fa-map"></i> fa-map</li>
                    <li><i class="fa fa-map-marker"></i> fa-map-marker</li>
                    <li><i class="fa fa-mouse-pointer"></i> fa-mouse-pointer</li>
                    <li><i class="fa fa-mobile"></i> fa-mobile</li>
                    <li><i class="fa fa-pencil"></i> fa-pencil</li>
                    <li><i class="fa fa-music"></i> fa-music</li>
                    <li><i class="fa fa-print"></i> fa-print</li>
                    <li><i class="fa fa-question"></i> fa-question</li>
                    <li><i class="fa fa-tag"></i> fa-tag</li>
                    <li><i class="fa fa-tags"></i> fa-tags</li>
                    <li><i class="fa fa-thumbs-up"></i> fa-thumbs-up</li>
                    <li><i class="fa fa-wifi"></i> fa-wifi</li>
                    <li><i class="fa fa-video-camera"></i> fa-video-camera</li>
                    <li><i class="fa fa-align-center"></i> fa-align-center</li>
                    <li><i class="fa fa-align-left"></i> fa-align-left</li>
                    <li><i class="fa fa-align-right"></i> fa-align-right</li>
                    <li><i class="fa fa-align-justify"></i> fa-align-justify</li>
                    <li><i class="fa fa-columns"></i> fa-columns</li>
                    <li><i class="fa fa-list"></i> fa-list</li>
                    <li><i class="fa fa-list-alt"></i> fa-list-alt</li>
                    <li><i class="fa fa-repeat"></i> fa-repeat</li>
                    <li><i class="fa fa-undo"></i> fa-undo</li>
                    <li><i class="fa fa-table"></i> fa-table</li>
                    <li><i class="fa fa-th"></i> fa-th</li>
                    <li><i class="fa fa-th-list"></i> th-list-share</li>
                    <li><i class="fa fa-floppy-o"></i> fa-floppy-o</li>
                    <h3>Directional Icons</h3>
                    <li><i class="fa fa-angle-double-down"></i> fa-angle-double-down</li>
                    <li><i class="fa fa-angle-double-left"></i> fa-angle-double-left</li>
                    <li><i class="fa fa-angle-double-right"></i> fa-angle-double-right</li>
                    <li><i class="fa fa-angle-double-up"></i> fa-angle-double-up</li>
                    <li><i class="fa fa-angle-down"></i> fa-angle-down</li>
                    <li><i class="fa fa-angle-up"></i> fa-angle-up</li>
                    <li><i class="fa fa-angle-left"></i> fa-angle-left</li>
                    <li><i class="fa fa-angle-right"></i> fa-angle-right</li>
                    <li><i class="fa fa-arrow-down"></i> fa-arrow-down</li>
                    <li><i class="fa fa-arrow-up"></i> fa-arrow-up</li>
                    <li><i class="fa fa-arrow-left"></i> fa-arrow-left</li>
                    <li><i class="fa fa-arrow-right"></i> fa-arrow-right</li>
                    <li><i class="fa fa-caret-down"></i> fa-caret-down</li>
                    <li><i class="fa fa-caret-up"></i> fa-caret-up</li>
                    <li><i class="fa fa-caret-left"></i> fa-caret-left</li>
                    <li><i class="fa fa-caret-right"></i> fa-caret-right</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
